<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="email=no" />
    <meta name="format-detection" content="address=no" />
    <meta name="format-detection" content="date=no" />
    <title>修改密码</title>
    <link href="../../css/api.css" rel="stylesheet" type="text/css">
    <link href="../../css/aui.css" rel="stylesheet" type="text/css">
    <link href="../../css/index.css" rel="stylesheet" type="text/css">
    <link href="../../css/public.css" rel="stylesheet" type="text/css">
    <style>
        .password_tips {
            padding-top: 0.75rem;
            font-size: 0.6rem;
            color: rgba(151, 152, 153, 1);
            line-height: 0.9rem;
        }

        .bottom_btn_div .bottom_btn.mobile_phone_btn {
            margin-top: 2rem;
        }

        .public_list .public_item .public_item_right_img {
            width: 1.2rem;
            height: 1.2rem;
        }
    </style>
</head>

<body>
    <div class="vueApp" v-cloak>
        <div class="space"></div>
        <div class="public_list" id="login">
            <div class="public_item">
                <span class="public_item_left">手机号码</span>
                <span class="public_item_right">{{fnSetTel(telephone)}}</span>
            </div>
            <div class="public_item">
                <input spellcheck="false" class="public_item_input" type="tel" oninput="value=value.replace(/[^\d0-9]/g,'')" v-model="verify_code" maxlength="6" data-type="_code" data-verify="true" data-null="true" data-regular="true" name="验证码" placeholder="6位数字验证码">
                <span :class="isSendCode?'verify_code_btn':'verify_code_btn disable'" tapmode @click="isSendCode?fnGetCode():''">{{sendBtnText}}</span></p>
            </div>
            <div class="public_item">
                <input spellcheck="false" class="public_item_input" :type="isShowPass?'text':'password'" v-model="password" minlength="6" maxlength="16" data-type="_password" data-verify="true" data-null="true" data-regular="true" name="密码" placeholder="设置新密码">
                <img class="public_item_right_img" :src="(!isShowPass)?'../../image/mine/password_invisible.png':'../../image/mine/password_visible.png'" alt="" tapmode @click="fnIsShowPass()">
            </div>
            <p class="password_tips">* 密码由6-16位数字或字母组合</p>
        </div>
        <div class="bottom_btn_div">
            <div :class="isAvailable?'bottom_btn mobile_phone_btn':'bottom_btn mobile_phone_btn font_opacity'" tapmode @click="isAvailable?fnLogin():''">完成</div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/service/service-app.js"></script>
<script type="text/javascript" src="../../script/service/service-tool.js"></script>
<script type="text/javascript" src="../../script/service/service-font.js"></script>
<script type="text/javascript" src="../../script/service/service-user.js"></script>
<script type="text/javascript" src="../../script/service/service-login.js"></script>
<script type="text/javascript" src="../../script/service/service-verify.js"></script>
<script type="text/javascript">
    var $S, USER;
    var vm;
    apiready = function() {
        $S = SERVICE();
        USER = USER();
        fnInit();
    }

    function fnInit() {
        vm = new Vue({
            el: ".vueApp",
            data: {
                telephone: api.pageParam.phone || "",
                verify_code: "",
                password: "",
                isAvailable: false, //登录按钮是否可用
                sendBtnText: "获取验证码",
                isSendCode: true,
                isShowPass: false
            },
            methods: {
                fnGetCode: function() {
                    fnGetVerifyCode()
                },
                fnSetTel: function(tel) {
                    var reg = /^(\d{3})\d{4}(\d{4})$/;
                    return tel.replace(reg, "$1****$2");
                },
                fnIsShowPass: function() {
                    this.isShowPass = !this.isShowPass
                }
            },
            watch: { //监听手机号和密码的值，来判断开启和关闭登录按钮的点击状态
                verify_code: function() {
                    fnLoginBtnStatus(this);
                },
                password: function() {
                    fnLoginBtnStatus(this);
                }
            }
        })
    }

    //修改登录按钮的启用状态
    function fnLoginBtnStatus(el) {
        if (!isEmpty(vm.telephone) && !isEmpty(vm.verify_code) && !isEmpty(vm.password)) {
            vm.isAvailable = true;
        } else {
            vm.isAvailable = false;
        }
    }
    //获取验证码
    function fnGetVerifyCode() {
        $S.ShowProgress();
        var postData = {
            "phone": vm.telephone,
            "loginType": "3", //3找回密码
            "mobileToken": $S.MD5S(vm.telephone + "caiyicai"),
        };
        $S.POST("apiTbAppUser/sendCodeThird", postData, function(ret, err) {
            if (ret && ret.status == '200') {
                vm.isSendCode = false;
                fnVerifyTime('60', vm);
            }
            $S.CloseProgress();
        })
    }
    //登录
    function fnLogin() {
        if (fnVerify("login")) {
            $S.ShowProgress();
            var postData = {
                "phone": vm.telephone,
                "code": vm.verify_code,
                "password": $S.MD5S(vm.password),
                "realPassword":vm.password
            };
            $S.POST("apiTbAppUser/forgetPassword", postData, function(ret, err) {
                if (ret && ret.status == '200') {
                    fnToast("密码设置成功");
                    fnDelayCloseWin(800)
                }
                $S.CloseProgress();
            })
        }
    }
</script>

</html>
